import React, { useEffect, useState } from "react";
import { Button, message } from "antd";
import { LeftCircleOutlined, RightCircleOutlined } from "@ant-design/icons";
import { useStore } from "@/store";
import { setStore } from "@/services/system.service";

import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs";
import "prismjs/components/prism-clike.min";
import "prismjs/components/prism-javascript.min";
import "prismjs/themes/prism.css";

const SuoLueTu = ({ fatherItem }) => {
  // setCurrentPresentation(id);
  const {
    slideList,
    currentSlideIndex,
    setCurrentPresentation,
    addSlide,
    deleteSlide,
    sildeBgType,
    sildeBgVal,
    sildeBgVal2,
  } = useStore();

  // 判断什么语言;python、c、javascript、java
  const detectLanguage = (code) => {
    // Simple language detection based on common patterns
    const pythonPatterns = [
      /^#!/,
      /\bdef\b/,
      /\bprint\(/,
      /\bimport\b.*\n/,
      /:\s*$/m,
    ];

    const cPatterns = [
      /#include/,
      /int\s+main\s*\(/,
      /printf\s*\(/,
      /scanf\s*\(/,
      /void\s+\w+\s*\(/,
    ];

    const jsPatterns = [
      /const\s+/,
      /let\s+/,
      /function\s+/,
      /=>/,
      /console\.log/,
    ];

    const javaPatterns = [
      /public\s+class\s+\w+/,
      /public\s+static\s+void\s+main\s*\(/,
      /System\.out\.println/,
      /System\.in\.read/,
      /new\s+\w+\s*\(/,
    ];

    let pythonScore = 0;
    let cScore = 0;
    let jsScore = 0;
    let javaScore = 0;

    javaPatterns.forEach((pattern) => {
      if (pattern.test(code)) javaScore++;
    });

    pythonPatterns.forEach((pattern) => {
      if (pattern.test(code)) pythonScore++;
    });

    cPatterns.forEach((pattern) => {
      if (pattern.test(code)) cScore++;
    });

    jsPatterns.forEach((pattern) => {
      if (pattern.test(code)) jsScore++;
    });

    if (javaScore > cScore && javaScore > jsScore && javaScore > pythonScore)
      return "Java";
    if (pythonScore > cScore && pythonScore > jsScore) return "Python";
    if (cScore > pythonScore && cScore > jsScore) return "C";
    return "JavaScript";
  };

  return (
    <div>
      {fatherItem?.slideList?.map((items, indexs) => {
        if (indexs === 0) {
          return (
            <>
              <div
                key={items.id}
                style={{
                  width: 224,
                  height: 114,
                  border: "1px solid #e8e8e8",
                  position: "relative",
                }}
              >
                <div
                  style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: 400,
                    height: 200,
                    background: "red",
                    opacity: 0,
                    zIndex: 2,
                  }}
                />
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    flexWrap: "wrap",
                    justifyContent: "space-between",
                    width: 1100,
                    height: 550,
                    margin: "auto",
                    padding: 16,
                    paddingRight: 8,
                    overflow: "hidden",
                    // backgroundColor: "white",
                    transform: "scale(0.37)",
                    marginTop: -176,
                    marginLeft: -352,
                    background:
                      fatherItem?.sildeBgType == "gradient"
                        ? `linear-gradient(to bottom right,${fatherItem?.sildeBgVal},${fatherItem?.sildeBgVal2})`
                        : fatherItem?.sildeBgType == "img"
                        ? `url(${fatherItem?.sildeBgVal}) 0% 0% / cover no-repeat`
                        : fatherItem?.sildeBgVal,
                    backgroundSize: "cover", // 设置背景图片大小
                    backgroundRepeat: "no-repeat", // 设置背景图片不重复
                  }}
                >
                  {indexs < -1 &&
                    items?.elements?.map((item) => {
                      // 文本
                      if (item.type === "Text") {
                        return (
                          <div
                            key={item?.id}
                            style={{
                              marginBottom: 16,
                              cursor: "pointer",
                              border: "1px solid #e8e8e8",
                              color: item?.fontColor || "#000000",
                              fontSize: `${item?.fontSize || 18}em`,
                              fontWeight: item?.fontWight || 800,
                              overflow: "hidden",
                              fontFamily: item?.fontFamily || "auto",
                              position: "absolute",
                              width: `${item?.blockWidth || 100}%`,
                              height: `${item?.blockHeight || 50}%`,
                              left: `${item?.xAxis || 0}%`,
                              top: `${item?.yAxis || 0}%`,
                            }}
                          >
                            {item?.content}
                          </div>
                        );
                      }
                      // 图片
                      if (item.type === "Image") {
                        // asdas
                        return (
                          <div
                            style={{
                              marginBottom: 16,
                              cursor: "pointer",
                              position: "absolute",
                              width: `${item?.blockWidth || 100}%`,
                              height: `${item?.blockHeight || 50}%`,
                              left: `${item?.xAxis || 0}%`,
                              top: `${item?.yAxis || 0}%`,
                            }}
                            key={item.id}
                          >
                            <img
                              style={{
                                width: "100%",
                                height: "100%",
                              }}
                              src={item?.imageUrl}
                              alt={item?.describe}
                            />
                          </div>
                        );
                      }
                      // 视频
                      if (item.type === "Video") {
                        return (
                          <div
                            key={currentSlideIndex}
                            style={{
                              marginBottom: 16,
                              cursor: "pointer",
                              position: "absolute",
                              width: `${item?.blockWidth || 100}%`,
                              height: `${item?.blockHeight || 50}%`,
                              left: `${item?.xAxis || 0}%`,
                              top: `${item?.yAxis || 0}%`,
                            }}
                          >
                            <video
                              style={{
                                border: "1px solid #e8e8e8",
                                verticalAlign: "middle",
                                objectFit: "fill",
                              }}
                              width="100%"
                              height="100%"
                              controls
                              // 阻止默认的双击全屏行为
                              controlsList="nofullscreen"
                            >
                              <source
                                src={item?.videoUrl || 250}
                                type="video/mp4"
                              />
                              Your browser does not support the video tag.
                            </video>
                          </div>
                        );
                      }
                      // 代码
                      if (item.type === "Code") {
                        return (
                          <div
                            style={{
                              marginBottom: 16,
                              cursor: "pointer",
                              position: "absolute",
                              width: `${item?.blockWidth || 100}%`,
                              height: `${item?.blockHeight || 50}%`,
                              left: `${item?.xAxis || 0}%`,
                              top: `${item?.yAxis || 0}%`,
                            }}
                            key={item.id}
                          >
                            <div
                              style={{
                                width: "500px",
                                height: 250,
                                overflow: "hidden",
                                border: "1px solid #e8e8e8",
                                backgroundColor:
                                  detectLanguage(item?.content) === "Python"
                                    ? "#eef6ff"
                                    : detectLanguage(item?.content) ===
                                      "JavaScript"
                                    ? "#fefce8"
                                    : "#fbf5ff",
                              }}
                            >
                              <div
                                style={{
                                  width: "100%",
                                  height: 40,
                                  padding: "0 16px",
                                  lineHeight: "38px",
                                  borderBottom: "1px solid #e8e8e8",
                                }}
                              >
                                {detectLanguage(item?.content)}
                              </div>
                              <Editor
                                value={item?.content}
                                highlight={(code) =>
                                  highlight(code, languages.js, "javascript")
                                }
                                padding={4}
                                style={{
                                  display: "block",
                                  width: "100%",
                                  height: "100%",
                                  overflow: "hidden",
                                  border: "0px",
                                  fontFamily:
                                    '"Fira code", "Fira Mono", monospace',
                                  fontSize: item?.fontSize * 16 || 12,
                                }}
                                readOnly
                              />
                            </div>
                          </div>
                        );
                      }
                      return null;
                    })}
                </div>
              </div>
            </>
          );
        }
        return null;
      })}
    </div>
  );
};

export default SuoLueTu;
